<template>
	<view class="page">
		<scroll-view scroll-y="true" enable-back-to-top="true" @scrolltolower="scrolltolower"  class="list-wrap" :style="{height: (windosHeight - 16) + 'px'}">	
			<view class="fun-flex-col list-item" v-for="item in holdList" :key="item.id" @click="toDetail(item)">
				<text class="name">{{item.product}}</text>
				
				<view class="fun-flex-row fun-justify-between item-wrap">
					<view class="fun-flex-col fun-items-center item">
						<text class="font_2">Settlement Amount</text>
						<text class="fun-mt-6">{{item.settlementamount}}</text>
					</view>
					
					<view class="fun-flex-col fun-items-center item">
						<text class="font_2">Net Return:</text>
						<text class="fun-mt-6" :class="item.totalprofit < 0 ? 'fall-text' : 'rise-text'">{{item.totalprofit}}</text>
					</view>
					
					<view class="fun-flex-col fun-items-center item">
						<text class="font_2">Performance Fee</text>
						<text class="fun-mt-6" :class="item.servicechargeamount < 0 ? 'fall-text' : 'rise-text'">{{item.servicechargeamount}}</text>
					</view>
				</view>
				
				<view class="fun-flex-row fun-items-center fun-justify-between con-bt">
					<text class="order">Order No.:{{item.orderNo}}</text>
					<text class="date">Expiry date:{{UTILS.setDateFormat(item.settlementdate)}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getTimeZone} from "@/common/js/func.js"
	import {holdings} from "@/api/home.js"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10,
					status:4,
					timeZone:8
				},
				holdList:[],
				total:0,
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		
		onLoad() {
			this.queryData.timeZone = getTimeZone() || 8;
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			setTimeout(() => {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		
		onPullDownRefresh() {
			this.holdList = [];
			this.queryData.page = 1;
			this.getHoldings();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			getHoldings(){
				holdings(this.queryData).then(res => {
					if(res.code == 0){
						this.holdList = this.holdList?.concat(res.data) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.holdList.length) {
					this.queryData.page++;
					this.getHoldings();
				}
			},
			toDetail(item){
				uni.navigateTo({
					url: '/pages/home/finishedDetail?orderId='+encodeURIComponent(item.id)+'&orderNo='+encodeURIComponent(item.orderNo)
				})
			}
			
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 32rpx 32rpx 0 32rpx;
		.list-wrap {
			width: 100%;
			.list-item {
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				border: solid 2rpx #f0f0f0;
				margin-top: 24rpx;
				&:first-child {
					margin-top: 0;
				}
				.name {
					font-size: 28rpx;
					font-weight: bold;
				}
				.item-wrap {
					margin: 24rpx 0;
					.item {
						font-size: 28rpx;
						font-weight: bold;
						.font_2 {
							font-size: 24rpx;
							font-family: SF Pro Display;
						}
					}
				}
				.con-bt {
					border-top: 2rpx solid #00000033;
					padding-top: 24rpx;
					font-size: 24rpx;
					.order {
						color: #999;
					}
				}	
			}
		}
	}
</style>